<template>
  <div class="login">
    <img class="bg" src="../assets/images/bg.png"/>
    <div class="headerContainer">
      <img src="../assets/images/login_logo.png"/>
      <div class="title">FAST</div>
    </div>
    <div class="headerDescriptionText">Let's Pay and Queue with FAST.</div>
    <div class="placeHolderTextContainer">FAST</div>
    <div class="bodyContainer">
      <div class="emailContainer">
        <img src="../assets/images/login_username_icon.png" />
        <input class="textInput" type="text" placeholder="USERNAME" id="username" v-model="uname" required/>
      </div>
      <div class="separateLine"></div>
      <div class="passwordContainer">
        <img src="../assets/images/login_password_icon.png" />
        <input class="textInput" type="password" id="password" placeholder='PASSWORD' v-model="pwd" required>
      </div>
      <div class="loginButtonContainer" @click="cheack_n_p">
        <div style="font-family: Ubuntu-M;color: white;font-size: .6rem">LOGIN</div>
      </div>
    </div>
    <div style="margin-top: .6rem;font-family: Ubuntu-LI;color: white;font-size: .4rem">Forgot Password?</div>
    <div class="signupContainer">
      <router-link to="/reg"><div style="font-family: Ubuntu-M;color: #1961A1;font-size: .6rem">New User?</div></router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login2',
    data () {
      return {
        uname: '',
        pwd: ''
      };
    },
    mounted () {
      if (this.getLogin) {
        this.$router.replace('/myzone');
      }
    },
    computed: {
    },
    methods: {
      cheack_n_p () {
        if (this.uname === '' || this.pwd === '') {
          // alert('Username or password cannot be empty');
        } else {
          this.$http
            .get(
              this.global.url + 'pos/login?username=' + this.uname + '&password=' + this.pwd + '&imei=' + this.global.imei,
              {},
            {
              emulateJSON: true,
              header: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }
            )
            .then(response => {
              response = response.body;
              if (response.code === 1) {
                console.log('welcome！');
                this.global.isLogin = true;
                this.global.userid = response.pos_user_id;
                this.global.username = this.uname;
                let userAgent = navigator.userAgent;
                if (userAgent.indexOf('Firefox') !== -1 || userAgent.indexOf('Chrome') !== -1) {
                  window.location.href = '#/myzone';
                } else if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) {
                  window.opener = null; window.open('#/myzone', '_self', '').close();
                } else {
                  window.opener = null;
                  window.open('#/myzone', '_self');
                  window.close();
                }
              } else {
                alert('wrong user name or password');
              }
            });
        }
      }
    },
    components: {
    }
  };
</script>

<style lang="less">
.login{
  width:100%;
  height:100%;
  position:fixed;
  /*z-index:-10;*/
  .bg{
    width:100%;
    height:100%;
    position:absolute;
    right: 0;
    z-index:-10;
  }
}
.headerContainer {
  float: left;
  width:100%;
  margin-top: 20%;
  display: flex;
  justify-content:center;
  align-items:Center;
  img {
    height: 2.4rem;
    display:inline;
    padding-right: .6rem;
  }
  .title {
    width: auto;
    font-family: Dreamscape;
    font-size: 1.5rem;
    color: white;
    display:inline;
  }
}
.headerDescriptionText {
  color: white;
  font-family: Ubuntu-LI;
  font-size: .45rem;
  margin-top: 4.8rem;
}
.placeHolderTextContainer {
  position: absolute;
  font-family: Dreamscape;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.2);
  transform: rotate(-90deg);
  bottom: 22%;
  right: -28%;
  z-index: -1;
}
.bodyContainer {
  flex-direction: column;
  background-color: white;
  margin-top: 20%;
  margin-left: 10%;
  border-radius: .6rem;
  width: 80%;
  .emailContainer {
    display: flex;
    justify-content:center;
    align-items:Center;
    height: 2rem;
    img {
      margin: .8rem;
      width: .8rem;
      height: .8rem;
    }
    .textInput {
      height: 1rem;
      font-size: .5rem;
      flex: 1;
      font-family: Nunito-Light;
      margin: 10px 10px 10px 0;
      padding-top: 0;
      padding-bottom: 0;
      color: #1E81CE;
      border: 0;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
      color: #1E81CE;
    }
  }
  .separateLine {
    height: 3px;
    background-color: #E2E2E2;
  }
  .passwordContainer {
    display: flex;
    justify-content:center;
    align-items:Center;
    height: 2rem;
    img {
      margin: .8rem;
      width: .8rem;
      height: .8rem;
    }
    .textInput {
      height: 1rem;
      font-size: .5rem;
      flex: 1;
      font-family: Nunito-Light;
      margin: 10px 10px 10px 0;
      padding-top: 0;
      padding-bottom: 0;
      color: #1E81CE;
      border: 0;
    }
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
      color: #1E81CE;
    }
  }
  .loginButtonContainer {
    background-color: #1E81CE;
    height: 2rem;
    border-bottom-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
    justify-content:center;
    align-items:Center;
    display: flex;
  }
  .loginButtonContainer:active {
    background-color: #50A1DC;
  }
}
.signupContainer {
  margin-top: .6rem;
  margin-left: 10%;
  width: 80%;
  height: 1.3rem;
  border-radius: .6rem;
  justify-content:center;
  align-items:Center;
  display: flex;
  background-color: white;
}
.signupContainer:active {
  background-color: #77B9E9;
}
</style>
